<template>
	<view>
		<!-- tab标签 -->
		<view class="tabs_list">
			<view class="tabs_item" @click="changeBar(null)">
				<view :class="['item_text', tabsActive === null ? 'bar_active' : '']">
					我上传的
				</view>
			</view>
			<view class="tabs_item" @click="changeBar(true)">
				<view :class="['item_text', tabsActive ? 'bar_active' : '']">
					我收藏的
				</view>

			</view>
			<view class="tabs_item" @click="changeBar(false)">
				<view :class="['item_text', tabsActive === false ? 'bar_active' : '']">
					我购买的
				</view>
			</view>
		</view>
		<block v-if="list.length > 0 && tabsActive === true || tabsActive === false">
			<view class="library_container" v-for="(item, index) in list" :key="index">
				<view class="library_item">
					<view class="img_box" @click="toPreView(item)">
						<image :src="item.ImageUrl" mode="aspectFill"></image>
					</view>
					<view class="info">
						<text>{{ item.LibraryName }}</text>
						<view class="source">{{ item.LibraryName }}</view>
						<view class="numsInfo">
							<view>
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/watch.png"></image>
								<text>{{ item.NumberViews }}</text>
							</view>
							<view>
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/print.png"></image>
								<text>{{ item.NumberDownloads }}</text>
							</view>
							<view>
								<text>共{{ item.TotalingPages || 1 }}页</text>
							</view>
						</view>
						<view class="bottom">
							<view class="price">
								<view class="price_text">
									<text class="symbol">￥</text>
									{{ item.Price == 0 ? '免费' : `${item.Price}` }}
								</view>
							</view>
							<view class="bottom_box">
								<view v-if="!item.IsCollect" class="collect" @click="collectOrCancel(item)">
									收藏
								</view>
								<view v-if="item.IsCollect" class="is_collect" @click="collectOrCancel(item)">
									已收藏
								</view>
								<view class="print" @click="toPrint(item)">
									{{ item.IsPurchase || item.Price == 0 ? '打印' : `购买` }}
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</block>

		<view class="file_list" v-if="fileList.length > 0 && tabsActive === null">
			<view class="file_item" v-for="(item, index) in fileList" :key="index">
				<!-- <view class="left">
					<image
						:src="item.isSelect? 'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/select.png' :'https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/notselect.png'"
						@click="changeSelect(item)"></image>
				</view> -->
				<view class="right">
					<view class="top">
						<text>{{ item.FileName.substring(0, 15) }}.{{ item.Suffix }}</text>
						<text>{{ returnTime(item.UploadDate) }}</text>
					</view>
					<!-- <view class="center">
						<view v-for="(itm,idx) in item.tags" :key="idx">
							<view style="display: flex;" v-for="(it,ix) in itm.list" :key="ix">
								<view class="tag" v-if="it.isSelect && itm.type=='choose'">
									{{it.PMName ||it.PCName || it.PapeTrypeName}}
								</view>
								<view class="tag" v-if="itm.type=='page'">
									{{itm.value}}页
								</view>
								<view class="tag" v-if="itm.type=='total'">
									{{itm.value}}份
								</view>
							</view>
						</view>
					</view> -->
					<view class="bottom">
						<!-- <text class="price">{{returnPrice(item)}}</text> -->
						<view class="status">
							<view class="status_item" @click="check(item)">
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/watch.png" mode="">
								</image>
								<text>预览</text>
							</view>
							<view class="status_item" @click="del(item, index)">
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/delete.png" mode="">
								</image>
								<text>删除</text>
							</view>
							<!-- <view class="status_item" @click="setting(item,index)">
								<image src="https://mg-print.oss-cn-shenzhen.aliyuncs.com/img/setting.png"
									mode=""></image>
								<text>设置</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 缺省组件 -->
		<pageEmpty v-if="list.length == 0 && (tabsActive === true || tabsActive === false)"
			:text="tabsActive === false ? '暂无购买文件哦~' : '暂无收藏文件哦~'"></pageEmpty>

		<pageEmpty v-if="fileList.length == 0 && tabsActive === null" text="你还没有上传文件哦~"></pageEmpty>
	</view>
</template>

<script>
// 缺省页
import pageEmpty from '@/components/pageEmpty/pageEmpty'
export default {
	components: {
		pageEmpty
	},
	data() {
		return {
			list: [],
			tabsActive: null,
			pageIndex: 1,
			pageSize: 10,
			fileList: [],
		};
	},
	methods: {
		async collectOrCancel(item) {
			console.log(item);
			let res = await this.$api.post('Library/SetLibraryCollect', {
				LibraryCode: item.LibraryCode,
				IsCollect: !item.IsCollect
			})
			item.IsCollect = !item.IsCollect
			console.log(res);
		},
		del(item, index) {
			let that = this
			let name = item?.name || item?.FileName
			uni.showModal({
				title: '提示',
				content: `确定将"${name}"从列表中删除`,
				success: function (res) {
					if (res.confirm) {
						that.fileList.splice(index, 1)
					}
					that.$api.post('PrintedFiles/DeleteFile', {
						FileCode: item.FileCode
					})
				}
			});
		},
		changeBar(bol) {
			this.tabsActive = bol
			this.pageIndex = 1
			this.list = []
			this.getList()
		},
		returnTime(time) {
			return time.replace('T', ' ')
		},
		check(item) {
			if (item.FileType == 'Img') {
				let imgsArray = [];
				imgsArray[0] = item.Url
				console.log('imgsArray[0]', imgsArray[0])
				uni.previewImage({
					current: 0,
					urls: imgsArray,
				});

			} else {
				uni.showLoading({
					title: `正在打开文件`
				})
				uni.downloadFile({
					url: item.Url,
					success: function (res) {

						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								console.log('打开文档成功');
								uni.hideLoading()
							}
						});
					}
				});
			}


		},
		async toPrint(item) {
			if (item.Price == 0 || item.IsPurchase) {
				// 跳转首页，存储到stroge里面，然后上传文件
				uni.setStorageSync('uploadOption', {
					name: item.LibraryName,
					url: item.LibraryUrl
				})
				this.$api.post('Library/SetFileLibraryD', { LibraryCode: item.LibraryCode })
				this.nav_to('/pages/otherPage/uploadFileList?isLibrary=true')
			} else {
				console.log(item);
				let res = await this.$api.post('Order/SetOpenMembership', {
					LibraryCode: item.LibraryCode,
					Delivery_Province: '',
					Delivery_City: '',
					Price: item.Price,
				})

				let pres = await this.$api.post('/Payment/PayV2', {
					body: res.data.EventType,
					// ShopsID: this.$store.state.storeInfo.ID,
					EventType: res.data.EventType,
					EventID: res.data.EventID,
					CompanyID: 7006,
					SourcePage: '/pages/tab/home',

					// // #ifdef MP-WEIXIN
					// PayChannel: 'weixin',
					// // #endif
					// // #ifdef APP
					// PayChannel: 'app'
					// // #endif
				});

				let _this = this;
				console.log(pres);
				let payObj = JSON.parse(pres.data);

				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async function (res) {
						_this.$pv.msg('购买成功，可在“我的文库”下查看模版');
						console.log(res);
						setTimeout(() => {
							// _this.closeAlert()
							// _this.upDateInfo();
						}, 500);
						item.IsPurchase = true
						// _this.nav_back(2000);
					},
					fail: function (err) {
						console.log(err);
						_this.$pv.msg('您已取消支付');
						console.log(_this.uploadFileList);

					}
				});
			}


		},
		toPreView(item) {
			let that = this
			uni.showLoading({
				title: `正在打开文件`
			})
			uni.downloadFile({
				url: item.LibraryUrl,
				success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						showMenu: true,
						success: async function (res) {
							let result = await that.$api.post('Library/SetFileLibraryV', {
								LibraryCode: item.LibraryCode
							})
							console.log('打开文档成功');
							console.log(result);
							item.NumberViews++
							uni.hideLoading()
						}
					});
				}
			});
		},
		async getList() {
			let obj = {
				LibraryName: '',
				SubclassCode: '',
				PageIndex: this.pageIndex,
				PageSize: this.pageSize,
				IsPrice: '',
				IsCollect: this.tabsActive,
				IsPay: !this.tabsActive
			}
			let res = await this.$api.post('Library/GetFileLibrary', {
				...obj
			})
			console.log(res);
			this.list = [...this.list, ...res.data.LbData]
			console.log(this.list);
		},
		async getFileList() {
			let res = await this.$api.post('PrintedFiles/GetFiles')
			console.log(res.data);
			this.fileList = res.data
		},
	},
	onLoad() {
		// this.getList()
		this.getFileList()
	},
	onReachBottom() {
		this.pageIndex = this.pageIndex + 1
		this.getList()
	}

}
</script>
<style>
page {
	background-color: #f9f9f9;
}
</style>

<style lang="scss" scoped>
.symbol {
	font-weight: bold;
	font-size: 24rpx;
	color: #FF4B4B;
}

.source {
	font-size: 24rpx;
	border-radius: 18rpx;
	border: 1rpx solid #3572FE;
	color: #3572FE;
	padding: 2rpx 16rpx;
	width: fit-content;
}

.bottom_box {
	display: flex;
	align-items: center;
	// margin-top: 30rpx;
	justify-content: flex-end;

	view {
		padding: 2rpx 24rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.collect {
		border-radius: 8rpx;
		border: 2rpx solid #3572FE;
		color: #3572FE;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.is_collect {
		border-radius: 8rpx;
		border: 2rpx solid #D2D2D2;
		color: #333333;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.print {
		background: #3572FE;
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}
}

.price_text {
	font-weight: bold;
	font-size: 36rpx;
	color: #FF4B4B;
}

.library_container {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 16rpx;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
}

.library_item {
	// height: 268rpx;
	box-sizing: border-box;

	display: flex;
	justify-content: space-between;

	// align-items: flex-end;
	.img_box {
		width: 158rpx;
		height: 224rpx;
		border-radius: 10rpx;
		background-color: #f6f6f6;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		// height: 170rpx;
		flex: 1;
		// margin-right: 100rpx;

		.numsInfo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #666666;
			padding-right: 100rpx;

			view {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}


}

.bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tag_select {
	color: #3572FE;
}

.info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 20rpx;
	// height: 170rpx;
	flex: 1;
	// margin-right: 100rpx;

	.numsInfo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666666;
		padding-right: 100rpx;

		view {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}

.tabs_list {
	.bar_active {
		color: #3572fe;
		border-bottom: 1rpx solid #3572fe;
	}

	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: 100rpx;
	background-color: white;
	position: sticky;
	top: 0;

	.tabs_item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
	}

	.item_text {
		width: fit-content;
		display: flex;
		align-items: center;
		height: 100%;
	}

}

.file_list {
	image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	display: flex;
	flex-direction: column;
	padding: 20rpx;
	// background-color: #f5f6f7;
	margin-top: 20rpx;

	.file_item {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}

		.center {
			font-size: 26rpx;
			display: flex;
			margin: 10rpx 0;

			.tag {
				padding: 5rpx 20rpx;
				box-sizing: content-box;
				background-color: #f5f5f7;
				margin-right: 10rpx;
				border-radius: 50rpx;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20rpx;

			.price {
				color: red;
				font-weight: bold;
			}

			.status {
				display: flex;
				align-content: center;
			}

			.status_item {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				text {
					font-size: 26rpx;
				}
			}
		}

		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
	}

	.left {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.right {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		flex: 1;
		margin-left: 20rpx;
	}
}
</style>